<template>
  <div class="channel-view">
    <h1>频道</h1>
    <div class="channel-grid">
      <div 
        v-for="(channel, index) in channels" 
        :key="index" 
        class="channel-item"
        @click="goToChannel(channel.tag)"
      >
        <img :src="channel.image" :alt="channel.tag">
        <div class="channel-tag">#{{ channel.tag }}#</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 删除了本地图片的 import 语句

const router = useRouter();

// 使用外部 URL 作为图片来源
const channels = ref([
  { tag: '热门', image: 'https://codelover.club/coursefiles/images/film/创意.jpeg' },
  { tag: '专题', image: 'https://codelover.club/coursefiles/images/film/剧情.jpeg' },
  { tag: '自制', image: 'https://codelover.club/coursefiles/images/film/动画.jpeg' },
  { tag: '创意', image: 'https://codelover.club/coursefiles/images/film/励志.jpeg' },
  { tag: '励志', image: 'https://codelover.club/coursefiles/images/film/实验.jpeg' },
  { tag: '搞笑', image: 'https://codelover.club/coursefiles/images/film/广告.jpeg' },
  { tag: '旅行', image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg' },
  { tag: '时尚', image: 'https://codelover.club/coursefiles/images/film/旅行.jpeg' },
  { tag: '汽车', image: 'https://codelover.club/coursefiles/images/film/时尚.jpeg' },
  { tag: '混剪', image: 'https://codelover.club/coursefiles/images/film/汽车.jpeg' },
  { tag: '游戏', image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg' },
  { tag: '爱情', image: 'https://codelover.club/coursefiles/images/film/游戏.jpeg' },
  { tag: '生活', image: 'https://codelover.club/coursefiles/images/film/爱情.jpeg' },
  { tag: '科幻', image: 'https://codelover.club/coursefiles/images/film/生活.jpeg' },
  { tag: '纪录', image: 'https://codelover.club/coursefiles/images/film/科幻.jpeg' },
  { tag: '美食', image: 'https://codelover.club/coursefiles/images/film/纪录.jpeg' },
  { tag: '运动', image: 'https://codelover.club/coursefiles/images/film/美食.jpeg' },
  { tag: '音乐', image: 'https://codelover.club/coursefiles/images/film/运动.jpeg' },
  { tag: '预告', image: 'https://codelover.club/coursefiles/images/film/音乐.jpeg' },
  { tag: '其他', image: 'https://codelover.club/coursefiles/images/film/预告.jpeg' }, 
]);

const goToChannel = (tag) => {
  console.log('点击了频道:', tag);
  // 这里可以添加跳转到对应频道页面的逻辑
  // router.push({ name: 'ChannelDetail', params: { tag: tag } });
};
</script>

<style src="../styles/Channel.css" scoped></style>